<template>
  <el-col :span="8">
    <div class="chat-col chat-col__middle"><col-middle></col-middle></div>
  </el-col>
  <el-col :span="16" id="chat-col__messages">
    <div class="chat-col">
      <div class="chat-logo flex" v-show="route.name === 'messages'">
        <SvgIcon icon-class="logo" />
      </div>
      <router-view /></div
  ></el-col>
</template>

<script lang="ts" setup>
import colMiddle from "@/components/messages/colMiddle/index.vue";
import { useRoute } from "vue-router";

const route = useRoute();
</script>

<style lang="scss" scoped>
#chat-col__messages {
  position: relative;
}

.chat-logo {
  height: 100%;
  font-size: 70px;
  color: $logoColor;
}
</style>
